import React from 'react'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import { Cell } from '@nutui/nutui-react';
import { saveUserId } from '../../store/userSlice';
import { NavBar } from '@nutui/nutui-react';
import { Left, Close } from '@nutui/icons-react'
import { getLogin } from '../../api';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  let dispatch = useDispatch()
  let navigate = useNavigate();

  const onFinish = ({ loginname, password }) => {
    getLogin({ loginname, password }).then(res => {
      console.log(res)
      if (res.data.code === '200') {
        localStorage.setItem('token', res.data.data.token)
        saveUserId(dispatch(saveUserId(res.data.data.userid)))
        navigate('/home')
      }
    })
  }

  const goZhuCe = () => {
    console.log(666);
    navigate('/regist/step1')
  }

  return (
    <div>
      <NavBar
        back={
          <>
            <Left name="left" color="#979797" />
          </>
        }
        left={
          <>
            <Close width={12} />
            <span>返回</span>
          </>
        }
        title={
          <span>京东登录</span>
        }
        onClickBack={console.log}
        onClickRight={console.log}
        onClickTitle={console.log}
      >
        <span>
          订单详情
        </span>
      </NavBar>

      <Form
        layout='horizontal'
        onFinish={onFinish}
        footer={
          <Button block type='submit' color='primary' size='large'>
            登录
          </Button>
        }
      >
        <Form.Item
          name='loginname'
          label='用户名'
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入用户名' />
        </Form.Item>
        <Form.Item name='password' label='密码' rules={[{ required: true, message: '密码不能为空' }]}>
          <Input type={'password'} onChange={console.log} placeholder='请输入密码' />
        </Form.Item>
      </Form>

      <span>去注册</span>
      <Cell onClick={goZhuCe}>
        <div>快速注册</div>
      </Cell>
    </div>
  )
}
